<template>
  <div>
    <div class="main-head flex-between container-fluid">
      <div class="title">
        <h1 v-text="$t('pro.admin.ManageUsers')"></h1>
      </div>
    </div>
    <div class="content container-fluid">
      <div class="portlet">
        <div class="tools flex-between">
          <div class="tools-l grid">
            <div class="tools-item">
              <label v-text="$t('pro.admin.SomeUserInfo')"></label>
              <a-input v-model="vague" :placeholder="$t('pro.admin.Info')"/>
            </div>
            <div class="tools-item">
              <label v-text="$t('pro.admin.Userrole')"></label>
              <a-select defaultValue=" " style="min-width: 128px;" @change="selectRole">
                <a-select-option value=" ">{{$t('pro.admin.All')}}</a-select-option>
                <a-select-option value="1">{{$t('pro.admin.Admin')}}</a-select-option>
                <a-select-option value="2">{{$t('pro.admin.Advert')}}</a-select-option>
              </a-select>
            </div>

            <div class="tools-item">
              <label>&nbsp;</label>
              <a-button type="primary" icon="search" @click="getUserList">{{ $t('pro.admin.Search') }}</a-button>
            </div>
            <div class="tools-item">
              <label>&nbsp;</label>
                <router-link to="/admin/users/save" style="color: white">
                  <a-button type="primary" icon="user-add">{{$t('pro.admin.AddUser')}}</a-button>
                </router-link>

            </div>
          </div>
        </div>
        <div>
          <a-table
            rowKey="id"
            :columns="columns"
            :dataSource="data"
            :pagination="false"
            :loading="loading"
            :scroll="{ x: 1300 }"
          >
            <template slot="name" slot-scope="text, record">{{record.firstName}} {{record.lastName}}</template>
            <template slot="roleId" slot-scope="text, record">{{ roles[record.roleId] }}</template>
            <template slot="lastLogin" slot-scope="text, record">{{record.lastLogin | formatLentime }}</template>

            <template slot="surplusAmount" slot-scope="text, record">{{record.surplusAmount | numberTo}}</template>
            <template slot="totalExpenses" slot-scope="text, record">{{record.totalExpenses | numberTo}}</template>

            <template slot="prepay" slot-scope="text, record">{{ record.prepay ? 'Yes' : 'No' }}</template>
            <template slot="action" slot-scope="text, record">
              <a-button
                type="primary"
                shape="circle"
                size="small"
                icon="dollar"
                :title="$t('pro.AddTransactionID.title')"
                @click="toDollar(record)"
              />&nbsp;
              <a-button
                type="primary"
                shape="circle"
                size="small"
                icon="user"
                :title="$t('pro.public.switchUser')"
                @click="changeUserByCompany(record)"
              />&nbsp;
              <a-button
                type="primary"
                shape="circle"
                size="small"
                icon="edit"
                :title="$t('pro.admin.ManageUsers')"
                @click="editUser(record)"
              />
            </template>
          </a-table>

          <!-- 分页 -->
          <div class="public-page-box">
            <a-pagination
                showSizeChanger
                showQuickJumper
                :pageSize.sync="pagination.pageSize"
                :total="pagination.total"
                v-model="pagination.current"
                @change="onShowSizeChange"
                @showSizeChange="onShowSizeChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllDataByPage } from "@/api/user";
import { parseTime } from '../../utils/time'

export default {
  inject: ["reload"],
  mounted() {
    this.fetch();
  },
  filters: {
      formatLentime(value) {
          return parseTime(value)
      },
      numberTo(value) {
          return '$'+Math.floor(value * 100) / 100
      }
  },
  data() {
    return {
      role: "",
      vague: "",
      usersCount: 0,
      data: [],
      pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '50'],
          current: 1,
          pageSize: 10,
          total: 50,
      },
      loading: false
    };
  },
  methods: {
    getUserList() {
        this.fetch({
            results: this.pagination.pageSize,
            page: this.pagination.current,
            role: this.role,
            vague: this.vague
        });
    },
    selectRole(role) {
        this.role = role.trim();
    },
    //监听分页的变化
    onShowSizeChange (page, pageSize) {
        this.fetch({
            results: pageSize,
            page: page,
            role: this.role,
            vague: this.vague
        });
    },
    fetch(params = {}) {
      this.loading = true;
      if (params.page == null) {
        params.page = 1;
      }
      if (params.results == null) {
        params.results = 10;
      }
      getAllDataByPage({...params}).then(res => {
          const pagination = { ...this.pagination };
          const data = res.data.data;
          this.data = data.records;
          pagination.total = data.total;
          this.pagination = pagination;
        }).finally(() => {this.loading = false;})
    },
    editUser(record) {
      this.$router.push("/admin/users/edit/id/" + record.id);
    },
    changeUserByCompany(record) {
        this.$store.commit("changeUserId", record.id);
        this.$router.push({ path: '/bidder/campaigns' })
        this.reload();
    },
    toDollar(record) {
        console.log(record.id);
        this.$router.push({path: `/admin/edittransaction/${record.id}` });
    }
  },
  computed: {
    columns(){
        return this.$t('pro.admin.ManageUserscolumns')
    },
    roles() {
      return {1: this.$t('pro.admin.Admin'), 2: this.$t('pro.admin.User') }
    }
  }
};
</script>
<style lang="less">
.table-operations {
  td {
    display: flex;
    justify-content: space-around;
    text-align: center;
  }
}
</style>
<style lang="less" scoped>
h1,
h3 {
  margin-bottom: 0;
}

label {
  display: block;
}

.grid.tools-l {
  grid-template-columns: repeat(4, auto);
}

@media screen and (max-width: 860px) {
  .tools.flex-between {
    display: block;
    > div:not(:last-child) {
      margin-bottom: 10px;
    }
    .tools-r {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      align-items: center;
    }
  }
}

@media screen and (max-width: 700px) {
  .tools.flex-between {
    // display: block;
    > div:not(:last-child) {
      // margin-bottom: 10px;
    }
    .tools-l {
      grid-template-columns: repeat(4, auto);
      .tools-item:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
      }
      .tools-item:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
      }
      .tools-item:nth-child(3) {
        grid-column: 2;
      }
      .tools-item:nth-child(4) {
        grid-column: 3;
        grid-row: 2;
      }
    }
  }
}

@media screen and (max-width: 420px) {
  .tools.flex-between {
    .tools-l {
      grid-template-columns: repeat(1, 1fr);
      .tools-item {
        grid-column: 1 !important;
      }
      .tools-item:nth-child(1) {
        grid-row: 1;
      }
      .tools-item:nth-child(2) {
        grid-row: 2;
      }
      .tools-item:nth-child(3) {
        grid-row: 3;
      }
      .tools-item:nth-child(4) {
        grid-row: 4;
        // 空格占位符
        label {
          display: none;
        }
      }
    }
  }
}

.table-operations {
  margin-bottom: 10px;
}


</style>



